<template>
	<view class="user">
		<!-- 个人信息 -->
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>


		<!-- 头部 -->
		<view class="box_top" @click="userDetail">
			<!-- title -->
			<view class="top_title">
				<text>我的</text>
			</view>

			<!-- 账号信息 -->
			<view class="user_box">
				<view class="box_left">
					<image :src="userInfo.face || userImage" style="width: 100%; height: 100%;"></image>
				</view>

				<view class="box_right">
					<view class="right_top">
						<view>
							<text class="name_font" v-if="userInfo.id">{{ userInfo.nickName }}</text>
							<text class="name_font" v-else>登录/注册</text>
						</view>

						<view class="icon_hzr">
							<text>合作人</text>
						</view>

					</view>

					<view class="right_bottom">
						<view class="bottom_box">
							<text>{{staUserCount.summaryCount }}</text>
							<text>收藏</text>
						</view>

						<view class="bottom_box">
							<text>{{staUserCount.orderCount }}</text>
							<text>订单</text>
						</view>

						<view class="bottom_box">
							<text>{{staUserCount.couponCount }}</text>
							<text>优惠券</text>
						</view>
					</view>



				</view>
			</view>
		</view>

		<!--body  -->
		<view class="box_body">
			<!-- 平台服务 -->
			<view class="service">
				<view class="ser_title"><text>平台服务</text></view>

				<view class="ser_child4">
					<view class="ser_box" @click="navigateTo(item)" v-for="(item ,index) in newserlist">
						<view class="ser_boximg">
							<image :src="item.url" mode="" style="width: 100%; height: 100%;"></image>
						</view>

						<view class="ser_boxfont">
							<text>{{item.name}}</text>
						</view>
					</view>

				</view>
			</view>

			<!-- 房东服务 -->
			<view class="service">
				<view class="ser_title"><text>房东服务</text></view>

				<view class="ser_child4">
					<view class="ser_box" @click="navigateTo(item)" v-for="(item ,index) in newlanserlist">
						<view class="ser_boximg">
							<image :src="item.url" mode="" style="width: 100%; height: 100%;"></image>
						</view>

						<view class="ser_boxfont">
							<text>{{item.name}}</text>
						</view>
					</view>

				</view>
			</view>

			<!-- 商家服务 -->
			<!-- <view class="service">
				<view class="ser_title"><text>商家服务</text></view>

				<view class="ser_child4">
					<view class="ser_box" @click="navigateTo(item)" v-for="(item ,index) in newmerserlist">
						<view class="ser_boximg">
							<image :src="item.url" mode="" style="width: 100%; height: 100%;"></image>
						</view>

						<view class="ser_boxfont">
							<text>{{item.name}}</text>
						</view>
					</view>

				</view>
			</view> -->


			<view class="service-section" v-if="userInfo.id==1916759754407792642">
				<text class="section-title">运维管理</text>
				<div class="menu-list">
					<div class="menu-item" @click="navigateTo(item)" v-for="(item, index) in manageList" :key="index">
						<div>
							<u-image width="88rpx" height="88rpx" class="menu-img" :src="item.icon">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</div>
						<div class="menu-title">{{ item.name }}</div>
					</div>
				</div>
			</view>

		</view>

		<!-- 常用工具 -->
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="" :arrow="false" title="技术支持" value="18313811616"
					@click="callPhoneNumber"></u-cell-item>
				<!--        <u-cell-item icon="question-circle" title="常见问题" @click="problem"></u-cell-item>-->
				<u-cell-item icon="" title="个人中心"
					@click="navigateTo2('/pages/mine/set/securityCenter/securityCenter')"></u-cell-item>
				<u-cell-item title="关于我们" :border-bottom="false"
					@click="navigateTo2('/pages/mine/help/tips?type=ABOUT')"></u-cell-item>
			</u-cell-group>
		</view>

		<u-modal v-model="showModal" :show-cancel-button="false" :content="modalContent" confirmText="电话咨询"
			@confirm="handleModalConfirm"></u-modal>
		<u-modal v-model="showRefusedModal" :show-cancel-button="false" content="您的店铺未通过审核,请根据要求修改后重新提交审核"
			confirmText="再次提交" @confirm="handleRefusedModalConfirm"></u-modal>
		<u-modal v-model="showClosedModal" :show-cancel-button="true" :content="'店铺已关闭 请联系管理员'" confirmText="联系管理员"
			@confirm="handleClosedModalConfirm"></u-modal>

		<!-- 分享海报弹出框 -->
		<u-modal v-model="showShareModal" title="分享海报">
			<view class="modal-close" @click="showShareModal = false">X</view>
			<view class="container">
				<!-- 头部信息 -->
				<view class="flex items-center mb-8">
					<view class="avatar-container">
						<image :src="userInfo.face" mode="aspectFill" class="rounded-full avatar-image"></image>
					</view>
					<text class="text-2xl font-bold name-text">{{userInfo.nickName}}</text>
				</view>
				<view class="text-center text-orange-500 mb-8">
					引荐更多用户,获得更多佣金
				</view>
				<u-line color="blue" border-style="dashed" />

				<view class="text-center text-orange-500 mb-8" style="padding-top: 20px">
					二维码邀请
				</view>
				<!-- 二维码区域 -->
				<view class="flex justify-center relative">
					<view class="qrimg-i">
						<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
							:background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
							:iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="true" :usingComponents="true"
							@result="qrR" />
					</view>
				</view>
				<!-- 保存图片按钮 -->
				<view class="flex justify-center mt-8">
					<button type="primary" @tap="saveQrcode"
						class="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">保存到图库</button>
				</view>
			</view>
		</u-modal>

		<drawCanvas ref="drawCanvas" v-if="showFlag" :res="res" />
	</view>
</template>

<script>
	import drawCanvas from "@/components/m-canvas";
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	//import tool from "@/pages/tabbar/user/utils/tool.vue";
	// import { getCouponsNum, getFootprintNum } from "@/api/members.js";
	// import { getUserWallet } from "@/api/members";
	import {
		getMpCode,
	} from "@/api/goods";
	import {
		getMemberInfo,
		getStaUserCount
	} from "@/api/store";
	import configs from '@/config/config'
	import storage from "@/utils/storage.js";
	import UModal from "../../../uview-ui/components/u-modal/u-modal.vue";
	export default {
		components: {
			UModal,
			drawCanvas,
			tkiQrcode
		},
		data() {
			return {
				configs,
				storage,
				showFlag: false,
				showModal: false,
				showRefusedModal: false,
				showClosedModal: false,
				showShareModal: false, // 控制分享海报弹出框的显示和隐藏
				userImage: configs.defaultUserPhoto,
				coverTransform: "translateY(0px)",
				coverTransition: "0s",
				moving: false,
				userInfo: {},
				store: {},
				couponNum: "",
				footNum: "",
				walletNum: "",
				haveStore: false, //是否店铺
				// 分销分享 实例
				res: {
					container: {
						width: 600,
						height: 960,
						background: "#fff",
						title: "分享背景",
					},
					// 分销分享
					bottom: {
						img: "",
						code: "",
						price: 0,
					},
				},
				adminList: [{
						name: "申请开店",
						icon: "heart",
						url: ""
					},
					{
						name: "地址管理",
						icon: "checkmark-circle",
						url: "/pages/mine/address/addressManage"
					},
					{
						name: "订单查询",
						icon: "order",
						url: "/pages/order/myOrder?status=0"
					},
					// { name: "我的收藏", icon: "heart", url: "/pages/mine/myCollect" },
					// {name:"服务人员",icon:"order",url:"/pages/mine/customer"},
					{
						name: "分享",
						icon: "order",
						url: ""
					},
					// { name: "访客信息", icon: "checkmark-circle", url: "/pages/mine/myTracks" },
					{
						name: "我的收藏",
						icon: "heart",
						url: "/pages/mine/myCollect"
					},
					{
						name: "历史足迹",
						icon: "checkmark-circle",
						url: "/pages/mine/myTracks"
					},
				],
				roomerList: [{
						name: "房价评估",
						icon: "checkmark-circle",
						url: "/pages/house/evaluate"
					},
					{
						name: "我要卖房",
						icon: "order",
						url: "/pages/house/detail/preHouse"
					},
					{
						name: "我要出租",
						icon: "order",
						url: "/pages/house/detail/zuHouse"
					},
					{
						name: "房屋管理",
						icon: "order",
						url: "/pages/house/order"
					}
				],
				storeList: [{
						name: "我的店铺",
						icon: "heart",
						url: "/pages/manage/sub/addStore"
					},
					{
						name: "店铺管理",
						icon: "heart",
						url: "/pages/passport/entry/seller/index"
					},
					// {name:"装修案例",icon:"order",url:""},
					{
						name: "我的收藏",
						icon: "heart",
						url: "/pages/mine/myCollect"
					},
					{
						name: "广告投放",
						icon: "order"
					},
					{
						name: "添加商品",
						icon: "info-circle",
						url: "/pages/store/createGoods"
					},
					{
						name: "人员管理",
						icon: "heart",
						url: "/pages/manage/renManage"
					},
					{
						name: "优惠劵管理",
						icon: "heart",
						url: "/pages/manage/cartManage"
					},
				],
				manageList: [{
						name: "店铺管理",
						icon: "heart",
						clickurl: "/pages/manage/storeManage"
					},
					{
						name: "房源管理",
						icon: "heart",
						clickurl: "/pages/manage/houseManage"
					},
					{
						name: "商品管理",
						icon: "heart",
						clickurl: "/pages/manage/goodManage"
					},
					{
						name: "楼盘管理",
						icon: "heart",
						clickurl: "/pages/manage/buildManage"
					},
				],
				modalContent: `您已经提交了店铺申请，请耐心等待
预计需要1-3个工作日
您可以拨打${configs.customerServiceMobile}进行咨询`,
				ifShow: true,
				// 修改为有效的微信小程序页面链接或者网页 URL
				val: '',
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: 'https://imgsa.baidu.com/forum/pic/item/cefc1e178a82b90166e3234d718da9773912ef06.jpg', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64


				// 平台服务
				newserlist: [{
						url: '/static/img/my/serbox_5.png',
						name: '申请开店'
					}, {
						url: '/static/img/my/serbox_1.png',
						name: '地址管理',
						clickurl: '/pages/mine/address/addressManage'
					},
					{
						url: '/static/img/my/serbox_2.png',
						name: '订单查询',
						clickurl: '/pages/order/myOrder?status=0'
					},
					{
						url: '/static/img/my/serbox_5.png',
						name: '分享'
					},
					{
						url: '/static/img/my/serbox_5.png',
						name: '我的收藏',
						clickurl: '/pages/mine/myCollect'
					},
					{
						url: '/static/img/my/serbox_5.png',
						name: '历史足迹',
						clickurl: '/pages/mine/myTracks'
					}
					// {
					// 	url: '/static/img/my/serbox_4.png',
					// 	name: '服务人员',
					// 	clickurl: '/pages/mine/customer'
					// },

				],
				// 房东服务
				newlanserlist: [{
						url: '/static/img/my/lanserbox_1.png',
						name: '房价评估',
						clickurl: '/pages/house/evaluate'
					},
					{
						url: '/static/img/my/lanserbox_2.png',
						name: '我要卖房',
						clickurl: "/pages/house/detail/preHouse"
					},

					{
						url: '/static/img/my/lanserbox_4.png',
						name: '我要出租',
						clickurl: "/pages/house/detail/zuHouse"
					},
					{
						url: '/static/img/my/lanserbox_3.png',
						name: '房屋管理',
						clickurl: "/pages/house/order"
					},

				],

				// 商家服务
				newmerserlist: [{
						url: '/static/img/my/merserbox_1.png',
						name: '我要出租'
					},
					{
						url: '/static/img/my/merserbox_2.png',
						name: '店铺管理'
					},
					{
						url: '/static/img/my/merserbox_3.png',
						name: '信息披露'
					},
					{
						url: '/static/img/my/merserbox_4.png',
						name: '访客信息'
					},
					{
						url: '/static/img/my/merserbox_5.png',
						name: '案例'
					},
					{
						url: '/static/img/my/merserbox_6.png',
						name: '媒体广告'
					},
					{
						url: '/static/img/my/merserbox_7.png',
						name: '商品管理'
					},
					{
						url: '/static/img/my/merserbox_8.png',
						name: '优惠券管理'
					}
				],
				staUserCount: {
					summaryCount: 0,
					orderCount: 0,
					couponCount: 0
				}
			};
		},
		onLoad() {},
		onShow() {
			this.userInfo = this.$options.filters.isLogin() || {};

			if (this.userInfo.haveStore) {
				this.haveStore = true;
			}
			if (this.$options.filters.isLogin("auth")) {
				//this.getUserOrderNum();
			} else {
				this.walletNum = 0;
				this.couponNum = 0;
				this.footNum = 0;
			}
			this.val = "https://fangshijie.top?id=" + this.userInfo.id;
			this.getMemberInfo();
			this.getStaUserCount();
		},
		onPullDownRefresh() {
			//  this.getUserOrderNum();
			this.userInfo = this.$options.filters.isLogin();

		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navigateTo("/pages/mine/set/setUp");
			}
		},
		// #endif

		mounted() {},
		methods: {
			getStaUserCount() {
				getStaUserCount().then(res => {

					if (res.data.code == 200) {

						this.staUserCount.summaryCount = res.data.result.summaryCount;
						this.staUserCount.couponCount = res.data.result.couponCount;
						this.staUserCount.orderCount = res.data.result.orderCount;
					}
				})

			},
			async handleLink() {
				//haibao
				uni.navigateTo({
					url: "/pages/mine/haibao",
				});
			},
			getMemberInfo() {
				getMemberInfo(this.userInfo.id).then(res => {
					if (res.data.code == 200) {
						this.store = res.data.result;
						uni.setStorageSync("store", this.store);
					}

				})
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "18313811616",
				});
			},
			clickNav(url) {
				if (url) {
					this.$u.route(url);
				} else {
					//this.$mytip.toast('敬请期待')
				}
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navigateTo(item) {
				if (item.name == '申请开店') {
					console.info("storeInfo=========", this.store)
					let url = null;
					if (this.store == null) {
						url = "/pages/manage/sub/addStore"
					} else {
						if (this.store.storeDisable === "OPEN") {
							url = "/pages/manage/sub/shopInfo";
							// storage.setStoreInfo(memberStoreInfo);
						} else if (this.store.storeDisable === "APPLYING") {
							this.showModal = true;
							return;
						} else if (this.store.storeDisable === "REFUSED") {
							this.showRefusedModal = true;
						} else if (this.store.storeDisable === "CLOSED") {
							this.showClosedModal = true;
							return
						} else {
							url = "/pages/manage/sub/addStore";
						}
					}
					uni.navigateTo({
						url: url,
					});
				} else if (item.name == '分享') {
					this.showShareModal = true; // 显示分享海报弹出框
					// 确保在弹出框显示后重新生成二维码
					this.$nextTick(() => {
						if (this.$refs.qrcode) {
							this.$refs.qrcode._makeCode();
						}
					});
				} else {
					uni.navigateTo({
						url: item.clickurl,
					});

				}

			},
			navigateTo2(url) {
				uni.navigateTo({
					url: url,
				});
			},
			handleModalConfirm() {
				uni.makePhoneCall({
					phoneNumber: this.configs.customerServiceMobile
				});
				console.log('用户点击确定');
				this.showModal = false;
			},
			handleRefusedModalConfirm() {
				uni.navigateTo({
					url: "/pages/manage/sub/addStore",
				});
				console.log('用户点击确定');
				this.showRefusedModal = false;
			},
			handleClosedModalConfirm() {
				uni.makePhoneCall({
					phoneNumber: this.configs.customerServiceMobile
				});
				console.log('用户点击确定');
				this.showClosedModal = false;
			},
			navigateToStore(item) {

				if (item.name == '店铺管理') {

					let url = null;

					if (this.store == null) {
						url = "/pages/manage/sub/addStore"
					} else {
						if (this.store.storeDisable === "OPEN") {
							url = "/pages/manage/sub/shopInfo";
							// storage.setStoreInfo(memberStoreInfo);
						} else if (this.store.storeDisable === "APPLYING") {
							url = "/pages/manage/sub/review";
						} else {
							url = "/pages/manage/sub/addStore";
						}
					}
					this.navigateTo(url);

					// uni.navigateTo({
					//   url: "/pages/manage/sub/review",
					// });

				}
				// var url=item.url
				// uni.navigateTo({
				//   url,
				// });
			},
			userDetail() {
				if (this.userInfo.id) {
					uni.navigateTo({
						url: "/pages/mine/set/personMsg",
					});
				} else {
					this.$options.filters.navigateToLogin();
				}

			},
			// async getUserOrderNum() {
			//   uni.stopPullDownRefresh();
			//
			//   Promise.all([
			//     getCouponsNum(), //优惠券
			//     getFootprintNum(), //浏览数量
			//     getUserWallet(), //预存款
			//   ]).then((res) => {
			//     this.couponNum = res[0].data.result;
			//     this.footNum = res[1].data.result;
			//     this.walletNum = res[2].data.result.memberWallet;
			//   });
			// },
			sliderchange(e) {
				this.size = e.detail.value
			},
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			saveQrcode() {
				this.$refs.qrcode._saveCode()
			},
			qrR(res) {
				this.src = res
			},
			clearQrcode() {
				this.$refs.qrcode._clearCode()
				this.val = ''
			},
			ifQrcode() {
				this.ifShow = !this.ifShow
			},
			selectIcon() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.icon = res.tempFilePaths[0]
						setTimeout(() => {
							that.creatQrcode()
						}, 100);
						// console.log(res.tempFilePaths);
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	html,
	body {
		overflow: auto;
	}

	.box_top {
		width: auto;
		height: auto;
		padding: calc(20rpx + var(--status-bar-height)) 0 0 0%;
		height: calc(var(--status-bar-height) + 210rpx);
		background: linear-gradient(to bottom, #cfe2fe, rgba(245, 245, 245));
		// position: sticky;
		// top: 0;
		z-index: 20;
		padding-bottom: 20rpx;
		// border-bottom: 2rpx #d9d9d9 solid;
		// box-shadow: 0 0 0 2rpx #d9d9d97a;

		.top_title {
			padding-top: 28rpx;
			font-size: 32rpx;
			font-weight: 600;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.user_box {
			// border: 1px red solid;
			margin-top: 50rpx;
			padding: 0 48rpx;
			display: flex;


			.box_left {
				width: 58px;
				height: 58px;
			}

			.box_right {
				margin-left: 36rpx;
				margin-top: 8rpx;


				.right_top {
					display: flex;


					.icon_hzr {
						background: linear-gradient(to left, rgb(255, 215, 144), rgb(255, 251, 206));
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 16rpx;
						color: rgb(117, 94, 94);
						margin-left: 26rpx;
						font-weight: 600;
					}

					.name_font {
						font-size: 40rpx;
						font-weight: 600;
					}
				}


				.right_bottom {
					margin-top: 14rpx;
					display: flex;
					align-items: center;

					.bottom_box {
						margin-right: 24rpx;

						&>text:first-child {
							font-size: 32rpx;
						}

						&>text:nth-child(2) {
							font-size: 24rpx;
							margin-left: 8rpx;
						}
					}
				}
			}
		}


	}


	.box_body {
		height: auto;
		margin-top: 80rpx;


		.service {
			// border: 1px red solid;

			background-color: #FFF;
			width: 100%;
			border-radius: 32rpx;
			padding: 20rpx 32rpx;
			margin-top: 16rpx;

			.ser_title {
				font-size: 36rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
			}

			.ser_child4 {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				flex-wrap: wrap;



				.ser_box {
					height: 100%;
					width: 25%;
					margin-top: 28rpx;
					// border: 1px red solid;

					.ser_boximg {
						width: 40px;
						height: 40px;
						// display: flex;
						margin: auto;
					}

					.ser_boxfont {
						font-size: 28rpx;
						font-weight: 400;
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

	}

	.money {
		overflow: hidden;

		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user {
		.header {
			max-width: 100%;
			padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
			height: calc(var(--status-bar-height) + 360rpx);
			background-size: cover;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			background-color: #ee8a76;
			background-position: bottom;
			background-repeat: no-repeat;
			color: #ffffff;
			display: flex;
			justify-content: space-between;

			.head-1 {
				text-align: center;
				width: 152rpx;
				position: relative;
				display: flex;
				align-items: center;

				image {
					width: 152rpx;
					height: 144rpx;
					border-radius: 50%;
					margin-bottom: 30rpx;
					border: 3px solid #fff;
				}

				.edti-head {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.3);
					top: 100rpx;
					right: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.head-2 {
				flex: 1;
				margin-left: 30rpx;
				margin-top: 100rpx;
				line-height: 1;
			}

			::v-deep .u-icon,
			.u-icon {
				margin-top: 106rpx;
			}
		}

		.pointBox {
			width: 94%;
			margin: 0 3%;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
		}

		.point {
			text-align: center;
			height: 160rpx;

			font-size: $font-sm;
			// #ifdef MP-WEIXIN
			padding: 24rpx;

			// #endif
			.u-col {
				view {
					color: $u-main-color;
					font-size: 28rpx;
				}

				view:last-child {
					margin-top: 8rpx;
					color: $main-color;
					font-size: $font-lg;
				}
			}
		}

		.order {
			height: 140rpx;
			text-align: center;
			font-size: $font-sm;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 0 3%;
			color: #999;

			.order-item {
				position: relative;
				line-height: 2em;
				width: 96rpx;

				:first-child {
					font-size: 48rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.box {
		transform: translateY(-30rpx);
	}

	.user-name {
		font-size: 34rpx;
	}

	.bag {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		margin: 0 auto;
	}

	.bag1 {
		background: #ff4a48;
	}

	.bag2 {
		background: #ff992f;
	}

	.bag3 {
		background: #009ee0;
	}

	.bag4 {
		background: #00d5d5;
	}

	.bag5 {
		background: #28ccb0;
	}

	.service-section {
		//margin-bottom: 20px;
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.menu-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		>.menu-item {
			text-align: center;
			width: 25%;
			// flex: 1;
			margin: 20rpx 0;
		}
	}

	.menu-img {
		display: flex;
		margin: 0 auto;
		width: 88rpx;
		height: 88rpx;
	}

	.menu-title {
		font-size: 28rpx;
	}

	.disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	/* haibao.vue 的样式 */
	.container {
		padding: 20px;
		background-color: #ffe4e1;
	}

	.flex {
		display: flex;
	}

	.items-center {
		align-items: center;
	}

	.mb-8 {
		margin-bottom: 20px;
	}

	.rounded-full {
		border-radius: 50%;
	}

	.avatar-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20px;
	}

	.avatar-image {
		width: 80px;
		height: 80px;
	}

	.name-text {
		line-height: 1.2;
	}

	.text-gray-600 {
		color: #666;
	}

	.text-xs {
		font-size: 12px;
	}

	.text-center {
		text-align: center;
	}

	.justify-center {
		justify-content: center;
	}

	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
	}

	.top-10 {
		top: 25px;
		/* 调整为合适的距离，这里设置为 25px */
	}

	.w-full {
		width: 100%;
	}

	.mt-8 {
		margin-top: 20px;
	}

	.bg-red-500 {
		background-color: #ff4500;
	}

	.text-white {
		color: white;
	}

	.py-2 {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.px-4 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.rounded-md {
		border-radius: 5px;
	}

	.hover:bg-red-600:hover {
		background-color: #b22222;
	}

	.focus:outline-none:focus {
		outline: none;
	}

	.focus:ring:focus {
		box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.5);
	}

	.focus:ring-red-300:focus {
		--tw-ring-color: #ff6347;
	}

	.text-orange-500 {
		color: #f97316;
	}

	.u-modal {
		position: relative;
	}

	.modal-close {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 24px;
		cursor: pointer;
		z-index: 1;
	}

	.qrimg-i {
		width: 400upx;
		/* 确保二维码区域有足够的宽度 */
		height: 400upx;
		/* 确保二维码区域有足够的高度 */
		margin: 0 auto;
		/* 居中显示 */
	}
</style>